<template>
  <el-container>
    <el-main>
      <div class="top-card">
        <div>基础信息</div>
        <el-divider></el-divider>
        <avue-form :option="option" v-model="form"></avue-form>
        <el-tabs type="border-card">
          <!-- <el-tab-pane label="检查记录">
            <el-row>
              <el-col :span="5">
                <div class="box">
                  <el-scrollbar>
                    <basic-container>
                      <div class="leftMenuwrap">
                        <el-button size="mini" type="primary" @click.native="treeAdd(scope)">新增</el-button>
                        <el-button size="mini" type="primary" @click.native="treeDiagnose(scope)">诊断</el-button>
                        <el-button size="mini" type="primary" @click.native="treeDel(scope)">删除</el-button>
                      </div>
                      <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" @update="updateTree"
                        @save="saveTree" @del="delTree" :filter-node-method="filterNodeMethod">
                        <template slot-scope="scope" slot="addBtn">
                        </template>
                      </avue-tree>
                    </basic-container>
                  </el-scrollbar>
                </div>
              </el-col>
              <el-col :span="19">
                <basic-container>
                  <div>检查报告特征表</div>
                  <el-divider></el-divider>
                  <el-image v-if="url" style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
                  </el-image>
                  <avue-crud v-if="rightData.length > 0" :option="rightOption" :search.sync="search" :table-loading="loading"
                    :data="rightData" ref="crud" v-model="form" :permission="permissionList" @row-del="rowDel"
                    @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen" :page.sync="page"
                    @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
                    @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange">
                    <template slot-scope="scope" slot="menuLeft">
                      <el-button v-if="rightData.length > 0" size="mini" type="primary"
                        @click.native="saveReport(scope)">修改</el-button>
                    </template>
                    <template slot-scope="scope" slot="menu">
                      <el-button type="text" size="small" icon="el-icon-view" @click.stop="handleChart(scope.row)">折线图
                      </el-button>
                    </template>
                  </avue-crud>
                  <el-dialog :visible.sync="dialogFormVisible" :width="dialogWidth" @opened="opened" @close="close"
                    :close-on-click-modal="false" append-to-body="true" modal-append-to-body="false">
                    <xiao-echarts id="HZMainId" :title="dialogName" :HZLegendData="echartsData.legendData"
                      :HZYdata="echartsData.series" :HZXdata="echartsData.time"></xiao-echarts>
                  </el-dialog>
                </basic-container>
              </el-col>
            </el-row>
          </el-tab-pane> -->
          <el-tab-pane label="问诊记录">
            <inquiryRecord ref="inquiryRecord" :id="id"></inquiryRecord>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-dialog title="新增检查报告" :visible.sync="dialogVisible" width="85%" :before-close="handleClose" :append-to-body="true"
      :destroy-on-close="true">
      <treeAdd ref="treeAdd" v-if="dialogVisible" :reportTypeId="reportTypeId" :patientId="id" @done="treeDone"></treeAdd>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCheck">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="诊断" :visible.sync="diagnoseDialogVisible" width="80%" :append-to-body="true"
      :close-on-click-modal="false" :destroy-on-close="true">
      <treeDiagnose ref="diagnose" v-if="diagnoseDialogVisible" :reportTypeId="reportTypeId" :patientId="id">
      </treeDiagnose>
      <template slot="footer">
        <div class="dialog-footer" style="text-align: left;">
          <el-button type="primary" @click="handleDiagnose">开始诊断</el-button>
          <el-button @click="diagnoseDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>
<script>
import { mapGetters } from "vuex";
import website from "@/config/website";
import treeAdd from "./treeAdd";
import treeDiagnose from "./treeDiagnose";
import xiaoEcharts from '@/components/xiao-echarts/main.vue'
import inquiryRecord from './inquiryRecord'
import { getDetail, getPatienFileTree, getCheckList, getCharacteristictargetData, treeRemove, checkEdit } from "@/api/infoManagement/patientFile";
export default {
  data() {
    return {
      dialogName: '',
      dialogFormVisible: false,
      dialogWidth: '70%',
      echartsData: {
        // legendData1: ['测试1', '测试2', '测试3'],
        legendData: [],
        time: [],
        series: [],
        // time1: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00'],
        series1: [
          {
            name: '测试1',
            data: [120, 132, 101, 134, 90, 230, 220],
            type: 'line',
            smooth: true,
          },
          {
            name: '测试2',
            data: [100, 112, 151, 134, 190, 280, 210],
            type: 'line',
            smooth: true,
          },
          {
            name: '测试3',
            data: [150, 132, 111, 145, 120, 240, 230],
            type: 'line',
            smooth: true,
          },
        ],
      },
      url: '',
      srcList: [],
      id: '',
      dialogVisible: false,
      diagnoseDialogVisible: false,
      reportTypeId: '',
      checkDate: '',
      title: '',
      form: {},
      treeData: [],
      treeOption: {
        nodeKey: 'code',
        defaultExpandAll: true,
        formOption: {
          labelWidth: 100,
          column: [{
            label: '分类名称',
            prop: 'name'
          }],
        },
        addBtn: false,
        menu: false,
        filter: true,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'title',
          value: 'id',
          children: 'children'
        }

      },
      option: {
        labelWidth: 110,
        submitBtn: false,
        emptyBtn: false,
        columnBtn: false,
        column: [
          {
            label: "姓名",
            prop: "name",
            readonly: true,
            span: 6,
            rules: [{
              required: true,
              message: "请输入患者姓名",
              trigger: "blur"
            }],
          },
          {
            label: "性别",
            prop: "sex",
            type: "radio",
            span: 6,
            disabled: true,
            dicData: [{
              label: '男',
              value: 1
            }, {
              label: '女',
              value: 0
            }],
            rules: [{
              required: true,
              message: "请选择",
              trigger: "blur"
            }],
          },
          {
            label: "出生日期",
            prop: "birthday",
            readonly: true,
            type: 'date',
            hide: true,
            valueFormat: 'yyyy-MM-dd',
            span: 6,
            rules: [{
              required: true,
              message: "请选择出生日期",
              trigger: "change"
            }]
          },
          {
            label: "身份证号",
            prop: "idCard",
            readonly: true,
            span: 6,
            rules: [{
              required: true,
              message: "请输入身份证号",
              trigger: "blur"
            }],
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
             disabled:true,
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: '/api/blade-system/region/select',
            span: 6,
             rules: [{
              required: true,
              message: "请选择省份",
              trigger: "blur"
            }],
          },
          {
            label: '地市',
            prop: 'city',
            type: 'select',
             disabled:true,
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['district'],
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{province}}',
            span: 6,
              rules: [{
              required: true,
              message: "请选择地市",
              trigger: "blur"
            }],
          },
          {
            label: '区县',
            prop: 'district',
            type: 'select',
             disabled:true,
            props: {
              label: 'name',
              value: 'code'
            },
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{city}}',
            span: 6,
            rules: [{
              required: true,
              message: "请选择区县",
              trigger: "blur"
            }],
          },
          {
            label: "详细地址",
            prop: "address",
            span: 6,
            readonly: true,
          },
          {
            label: "民族",
            type: "select",
             disabled:true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=nation_dict",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            slot: true,
            prop: "nation",
            search: true,
            span: 6,
            rules: [{
              required: true,
              message: "请选择民族",
              trigger: "blur"
            }]
          },
          // {
          //   label: "民族",
          //   prop: "nation",
          //   readonly: true,
          //   span: 6
          // },
          // {
          //   label: "身高(cm)",
          //   prop: "height",
          //   readonly: true,
          //   span: 6
          // },
          // {
          //   label: "体重(kg)",
          //   prop: "weight",

          //   readonly: true,
          //   span: 6
          // },
          {
            label: "联系人",
            prop: "contacts",
            readonly: true,
            span: 6
          },
          {
            label: "联系电话",
            prop: "telephone",
            readonly: true,
            span: 6,
            rules: [{
              required: true,
              message: "请输入联系电话",
              trigger: "blur"
            }],
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            span: 12,
            minRows: 2,
            readonly: true,
          },

        ]
      },
      rightData: [],
      rightOption: {
        addBtn: false,
        // editBtn: false,
        delBtn: false,
        addRowBtn: false,
        menu: true,
        cellBtn: true,
        menuWidth: 250,
        columnBtn: false,
        maxHeight: 500,
        column: [],
        column1: [{
          label: '特征名称',
          prop: 'name1',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '特征编号',
          prop: 'name2',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '药前',
          prop: 'name3',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '药后',
          prop: 'name4',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '改善率',
          prop: 'name5',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '检查时间',
          prop: 'name6',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        },

        ]
      }
    }
  },
  created() {
    this.title = this.$route.query.title
    this.form.id = this.$route.query.id
    this.id = this.$route.query.id
    this.load()
  },
  components: {
    treeAdd,
    treeDiagnose,
    xiaoEcharts,
    inquiryRecord,
  },
  methods: {
    rowSave(form, done) {
      done()
    },
    saveReport() {
      const item = {
        ocrResult: JSON.stringify({
          list: this.rightData
        }),
        id: this.reportTypeId,
      }
    
      checkEdit(item).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      })
    },
    handleDiagnose() {
      this.$refs.diagnose.diagnose()
    },
    handleChart(row) {
      getCharacteristictargetData({
        characteristicCode: row.code,
        patientId: this.form.id,
        startDate: '',
        endDate: '',
      }).then((res) => {
        const data = res.data.data
        this.echartsData.time = data.time
        this.echartsData.series = data.series.map((el) => {
          this.echartsData.legendData.push(el.name)
          return {
            ...el,
            type: 'line',
            smooth: true,
          }
        })
        console.log('折线图', this.echartsData);
        this.dialogName = `${row.name}检查报告特征趋势图`
        this.dialogFormVisible = true
      })
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getCheckList({
        id: this.reportTypeId,
      }).then(res => {
        const data = res.data.data
        this.loading = false;
        const colums = data.colums
        // this.checkDate = res.pictureData.time
        const list = data.pictureData.list
        this.buildColumns(colums)
        this.rightData = list
        this.url = data.link
        this.srcList.push(this.url)
        // const data = res.data.data;
        // this.page.total = data.total;
        // this.data = data.records;
        // this.loading = false;
        // this.selectionClear();
      });
    },
    buildColumns(columns) {
      const arr = columns.map((column) => {
        return {
          ...column,
          cell: true,
        }
      })
      this.rightOption.column = arr
    },
    load() {
      getDetail(this.form.id).then(res => {
        const self=this
        const data=res.data.data
        self.form = data
        const arr = data.addressCode && data.addressCode.split(',')
        if (arr) {
          self.form.province = arr[0]
          self.form.city = arr[1]
          self.form.district = arr[2]
        }
      });
      this.initTree()
    },
    treeDone() {
      this.dialogVisible = false
      this.load()
    },
    saveCheck() {
      this.$refs.treeAdd.save()
    },
    nodeClick(data) {
      this.selectNode = data
      this.reportTypeId = data.code;
      if (data.level == 2) {
        this.onLoad();
      } else {
        this.rightData = []
        this.url = ''
      }
    },
    //诊断
    treeDiagnose() {
      // if (this.reportTypeId == '' || this.reportTypeId == '1639889458902409218') {
      //   this.$message({
      //     type: "warning",
      //     message: "请选择诊断单分类节点"
      //   });
      //   return;
      // }
      this.diagnoseDialogVisible = true
    },
    treeAdd() {
      if (this.selectNode && this.selectNode.level == 1) {
        this.dialogVisible = true
        return;
      }
      this.$message({
        type: "warning",
        message: "请选择报告单分类节点"
      });

    },
    treeDel() {
      if (!this.selectNode) {
        this.$message({
          type: "warning",
          message: "只允许删除时间节点"
        });
      }
      const { level, id } = this.selectNode
      if (level != 2) {
        this.$message({
          type: "warning",
          message: "只允许删除时间节点"
        });
        return
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return treeRemove(this.reportTypeId);
        })
        .then(() => {
          this.initTree()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    initTree() {
      this.treeData = [];
      getPatienFileTree({
        patientId: this.form.id,
      }).then(res => {
        this.treeData = res.data.data.map(item => {
          return {
            ...item,
            leaf: !item.hasChildren
          }
        })
      });
    },
  }
}
</script>
<style >
.avue-crud {
  margin-top: 20px;
}
</style>

<style>
.leftMenuwrap {
  text-align: left;
  margin-bottom: 10px;
}

.top-card {
  /* border: 1px solid black; */
  background-color: #fff;
  padding: 20px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  /* height: 590px; */
}
</style>

<style scoped>
.grid-content {
  height: 80px;
  text-align: center;
  line-height: 40px;
}

.middle {
  border-left: 2px solid #f1f1f1f1;
}

.grid-content .grid-content-item {
  font-weight: bold;
  height: 50%;
  text-align: center;
  line-height: 40px;
}

.top-card {
  margin: 10px 30px;
}

/* TODO:改变按钮的颜色未起作用 */
.el-switch.is-checked .el-switch__core {
  border-color: #00e266 !important;
  background-color: #00e266 !important;
}
</style>